<template>
  <div>
    <div class="wrapper">
      <div class="half left">
        <div class="input-row">
          <el-form :inline="true" :model="formInline" @submit.native.prevent>
            <el-form-item label="标准名称">
              <el-input size="mini" clearable v-model="formInline.standardName" @keyup.native.enter="handleFilter" />
            </el-form-item>
            <el-form-item label="术语中文">
              <el-input size="mini" clearable v-model="formInline.nameZh" @keyup.native.enter="handleFilter" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleFilter" size="mini">查询</el-button>
              <el-button @click="resetQuery" size="small">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="ins-table-cap">术语库</div>
        <el-table
          :data="tableData"
          v-loading="loading"
          class="ins-table"
          height="calc(100vh - 280px)"
          empty-text="无被检索术语"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left">
                <el-form-item label="中文名称">{{ props.row.nameZh }}</el-form-item>
                <el-form-item label="英文名称">{{ props.row.nameEn }}</el-form-item>
                <el-form-item label="标准名称">{{ props.row.standardName }}</el-form-item>
                <el-form-item label="标准编号">{{ props.row.standardNo }}</el-form-item>
                <el-form-item label="版本">{{ props.row.standardVersion }}</el-form-item>
                <el-form-item label="术语类型">{{ props.row.typeName }}</el-form-item>
                <!-- <el-form-item label="释义描述">{{ props.row.description }}</el-form-item>
                <el-form-item label="来源">{{ props.row.referSource }}</el-form-item> -->
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="nameZh" label="中文名称" width="150"> </el-table-column>
          <el-table-column prop="nameEn" label="英文名称" width="150"> </el-table-column>
          <el-table-column prop="standardName" label="标准名称" width="200"> </el-table-column>
          <el-table-column prop="standardNo" label="标准编号" width="150"> </el-table-column>
          <el-table-column prop="standardVersion" label="版本"> </el-table-column>
          <el-table-column prop="typeName" label="术语类型"> </el-table-column>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="mini" :disabled="getDisabled(scope.row)" @click="insert(scope.row)"
                >插入</el-button
              ></template
            >
          </el-table-column>
        </el-table>

        <el-pagination
          v-if="total"
          layout="prev, pager, next"
          :page-size="10"
          :total="total"
          :current-page.sync="currentPage"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>

      <div class="center"></div>

      <div class="half right" style="margin-top: 64px">
        <div class="ins-table-cap">已插入术语</div>
        <el-table :data="list" class="ins-table" height="calc(100vh - 280px)">
          <!-- <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left">
                <el-form-item label="中文">{{ props.row.termData.nameZh }}</el-form-item>
                <el-form-item label="英文">{{ props.row.termData.nameEn }}</el-form-item>
                <el-form-item label="中文释义">{{ props.row.termData.description }}</el-form-item>
                <el-form-item label="英文释义">{{ props.row.termData.descriptionEn }}</el-form-item>
                <el-form-item label="来源">{{ props.row.termData.source }}</el-form-item>
                <el-form-item label="注">
                  <div v-for="(note, index) of props.row.termData.noteList" :key="note.dataId">
                    注{{ index + 1 }}:{{ note.textData.contentList[1].content }}
                  </div>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column> -->
          <el-table-column prop="termData.nameZh" label="中文名称" width="150"> </el-table-column>
          <el-table-column prop="termData.nameEn" label="英文名称" width="150"> </el-table-column>
          <!-- <el-table-column prop="termData.source" label="来源" width="200"> </el-table-column> -->
          <el-table-column label="操作">
            <template slot-scope="scope"
              ><el-button size="mini" type="text" :disabled="scope.$index === 0" @click="moveup(list, scope.$index)"
                >上移</el-button
              >
              <el-button
                size="mini"
                type="text"
                :disabled="scope.$index === list.length - 1"
                @click="movedown(list, scope.$index)"
                >下移</el-button
              >
              <el-button size="mini" type="text" @click="remove(list, scope.$index)">删除</el-button></template
            >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { v4 as uuid } from 'uuid'
import { getTermListApi } from '@/api'
import { moveup, movedown, remove } from '@/utils/helpers'
import { cloneDeep } from 'lodash'

export default {
  name: 'TabPaneTerms',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.resetQuery()
        this.list = cloneDeep(this.$store.state.xmleditor.termBlockList)
      }
    }
  },
  data() {
    return {
      loading: false,
      total: 0,
      currentPage: 1,
      tableData: [],
      formInline: {
        standardName: undefined,
        nameZh: undefined
      },
      list: []
    }
  },
  methods: {
    getData() {
      return this.list
    },
    resetQuery() {
      this.currentPage = 1
      this.formInline = {
        standardName: undefined,
        nameZh: undefined
      }
      this.handleFilter()
    },
    moveup,
    movedown,
    remove,
    getDisabled(row) {
      return !!this.list.find((i) => i?.termData?.id == row?.id)
    },
    async handleFilter(e) {
      if (e) {
        this.currentPage = 1
      }
      const data = { ...this.formInline, pageSize: 10, pageNum: this.currentPage }
      data.status = 1
      this.loading = true
      const { count, list, pageNum } = await getTermListApi(data)
      this.loading = false
      this.total = count
      this.tableData = list
      this.currentPage = pageNum
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.handleFilter()
    },
    insert(row) {
      const { id, description, descriptionEn, nameEn, nameZh, noteList, referSource, jsonContent } = row
      this.list.push({
        blockId: uuid(),
        dataType: 'terms',
        termData: {
          dataId: uuid(),
          id,
          description,
          descriptionEn,
          jsonContent,
          nameEn,
          nameZh,
          noteList,
          source: referSource
        }
      })
    }
  }
}
</script>

<style scoped>
.wrapper {
  display: flex;
}
.ins-table {
  width: 100%;
}
::v-deep .el-table .el-table__cell form {
  margin-left: 80px;
}
::v-deep .el-table .el-table__cell form > div {
  margin-bottom: 0;
}
::v-deep .el-table .el-table__cell form > div > label {
  font-weight: bold;
}
::v-deep .el-table td.el-table__cell div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.half {
  width: 49.5%;
}
.center {
  border: 1px dashed #ccc;
  height: calc(70vh);
  margin: auto 10px;
}
.row {
  display: flex;
}
.row > div {
  padding: 0 1px;
  margin-bottom: 0;
}
.row > div:nth-child(3),
.row > div:nth-child(4) {
  flex-grow: 1;
}
.row > div:nth-child(1),
.row > div:nth-child(2),
.row > div:nth-child(5),
.row > div:nth-child(6),
.row > div:last-child {
  width: 200px;
}
</style>
